import { Component, ViewChild, ElementRef, Input } from '@angular/core'
import { IonicPage, NavController, NavParams } from 'ionic-angular'
import { HttpServicesProvider } from '../../../providers/http-services/http-services'
declare let echarts //设置echarts全局对象

@IonicPage()
@Component({
  selector: 'page-completion',
  templateUrl: 'completion.html'
})
export class CompletionPage {
  @ViewChild('EchartsContent')
  container: ElementRef //与html中div #container1对应
  EChart: any // 图表插件
  data: any // 父页面传来的数据
  total: any // 产品总数
  qualification: any // 合格数
  scraps: any // 废品数
  productAll: any // 总列表
  productList: any // 展示列表
  findPartialStatusList: any // 汇总数据
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public httpService: HttpServicesProvider
  ) {
    this.data = navParams.get('params') // 获取父页面传来的参数
    let params = new Object()
    params['companyCode'] = this.data.customer
    params['orderFlowNumId'] = this.data.orderNumber
    params['productionNum'] = this.data.productionNum
    this.httpService.requestDataPost(
      'app/mesPartialMangement/partialDetailData',
      params,
      {},
      (status, datas) => {
        if (status) {
          console.log(datas)
          this.qualification =
            datas.countPartialDataList[0].completeQualifiedTotalCnt
          this.scraps = datas.countPartialDataList[0].completeWasteTotalCnt
          this.total = datas.countPartialDataList[0].partialCount
          this.productAll = datas.findDetailDataList
          this.productList = this.productAll.slice()
          this.initEcharts(this.qualification, this.scraps)
        }
      }
    )
  }

  // 初始化Echarts饼图
  ionViewDidLoad(navParams: NavParams) {}

  // 初始化饼图
  initEcharts(qualification, scraps) {
    let ctelement = this.container.nativeElement
    this.EChart = echarts.init(ctelement)
    this.EChart.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        // textStyle: {
        //   color: '#fff'
        // },
        data: ['合格数', '废品数']
      },
      series: [
        {
          name: '数据统计',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: qualification, name: '合格数' },
            { value: scraps, name: '废品数' }
          ],
          itemStyle: {
            color: function(params) {
              // build a color map as your need.
              var colorList = [
                '#2ac4c9',
                '#0e4454',
                '#FCCE10',
                '#E87C25',
                '#27727B',
                '#FE8463',
                '#9BCA63',
                '#FAD860',
                '#F3A43B',
                '#60C0DD',
                '#D7504B',
                '#C6E579',
                '#F4E001',
                '#F0805A',
                '#26C0C0'
              ]
              return colorList[params.dataIndex]
            }
          }
        }
      ]
    })
  }
}
